import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { formFieldDefaultProps } from './defaultProps';
import type { FormFieldOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface FormFieldProps extends FormFieldOptions, HTMLAttributes<HTMLDivElement> {}

const FormField: FC<FormFieldProps> = (props) => {
  const { className, wide, children, forwardedRef, ...formFieldProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames(numberToWord(wide), { wide }, 'field', className), ...formFieldProps },
    children,
  );
};

FormField.displayName = 'FormField';
FormField.defaultProps = formFieldDefaultProps;

export default FormField;
